<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>图书列表</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/book/list.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/pager/pager.css'/>"/>
    <link rel="stylesheet" type="text/css" href="/jquery/pagination/pagination.css"/>
    <%--<script type="text/javascript" src="<c:url value='/jsps/pager/pager.js'/>"></script>--%>
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.9.1.min.js'/>"></script>
    <script type="text/javascript" src="/jquery/pagination/jquery.pagination.js"></script>
    <script type="text/javascript" src="<c:url value='/jsps/js/book/list.js'/>"></script>
</head>
<body>
<input id="categoryId" type="hidden" value="${categoryId}">
<ul id="bookList">
    <c:forEach items="${bookList}" var="book">
        <li>
            <div class="inner">
                <a class="pic" href="/book/loadBookById.do?bookId=${book.bookId}">
                    <img src="${book.imageB }" border="0"/>
                </a>
                <p class="price">
                    <span class="price_n">&yen;${book.currentPrice}</span>
                    <span class="price_r">&yen;${book.price}</span>
                    (<span class="price_s">${book.discount}折</span>)
                </p>
                <p><a id="bookname" href="/jsps/book/desc.jsp" title="${book.bookName }">${book.bookName}</a></p>
                <p><a href="/jsps/book/list.jsp" name='P_zz' title='${book.author }'>${book.author }</a></p>
                <p class="publishing">
                    <span>出 版 社：</span><a href="<c:url value='/jsps/book/list.jsp'/>">${book.press }</a>
                </p>
                <p class="publishing_time"><span>出版时间：</span><fmt:formatDate value="${book.publishTime }"
                                                                             pattern="yyyy-MM-dd"></fmt:formatDate></p>
            </div>
        </li>
    </c:forEach>
</ul>

<div style="float:left; width: 100%; text-align: center;">
    <hr/>
    <br/>
    <%--<%@include file="/jsps/pager/pager.jsp" %>--%>
    <div id="pagination"></div>
</div>
<script type="text/javascript">
    $(function () {
        //分页展示
        displayData(0);
    });
    function displayData(pageNo) {
        var categoryId = $("#categoryId").val();
        $.get("/book/getBookListByCategoryIdPager", {
            categoryId: categoryId,
            currentPage: pageNo+1,
            pageSize: 3,
            _: new Date().getTime()
        }, function (data) {
            if (data) {
                var htmlStr = "";
                $.each(data.list, function (i, n) {
                    htmlStr += "<li> <div class='inner'>";
                    htmlStr += "<a class='pic' href='/book/loadBookById.do?bookId='" + n.bookId + ">";
                    htmlStr += "<img src='" + n.imageB + "' border='0'/>";
                    htmlStr += "</a>  ";
                    htmlStr += "<p class='price'>";
                    htmlStr += "<span class='price_n'>&yen;" + n.currentPrice + "</span>";
                    htmlStr += "<span class='price_r'>&yen;" + n.price + "</span>";
                    htmlStr += "(<span class='price_s'>" + n.discount + "折</span>)";
                    htmlStr += "</p>  ";
                    htmlStr += "<p><a id='bookname' href='/jsps/book/desc.jsp' title='" + n.bookName + "'>" + n.bookName + "</a></p>";
                    htmlStr += "<p><a href='/jsps/book/list.jsp' name='P_zz' title='" + n.author + "'>" + n.author + "</a></p>";
                    htmlStr += "<p class='publishing'>";
                    htmlStr += "<span>出 版 社：</span><a href='/jsps/book/list.jsp'>" + n.press + "</a>";
                    htmlStr += "</p>  ";
                    htmlStr += "<p class='publishing_time'><span>出版时间：</span>" + n.publishTime;
                    htmlStr += "</div>";
                    htmlStr += "</li>";
                })
                $("#bookList").html(htmlStr);
                <%--$("#pagination").pagination(${pager.total}, {--%>
                $("#pagination").pagination(data.total, {
                    callback: displayData,//每次在翻页的时候执行的回调函数   参数代表了页码 ，但是比正常显示的页码小一个
                    items_per_page: 3, //每页显示多少条数据
                    current_page: pageNo,//当前页码  比正常显示的页码小一个
                    link_to: "javascript:void(0)",//保留超链接的样式,执行js代码,但是不跳转到任何资源
                    num_display_entries: 8,//最大显示多少可用的分页连接
                    next_text: "下一页",//下一页显示的文本内容
                    prev_text: "上一页",
                    next_show_always: true,//没有下一页的时候 是否显示超链接
                    prev_show_always: true,//没有上一页的时候 是否显示超链接
                    num_edge_entries: 2,//如果页码较多 用...省略
                    ellipse_text: "..."//用指定字符省略
                });
            }
        });
    }
</script>
</body>
</html>

